<template>
  <div class="weather-forecast">
    <div class="header-title">
      <dv-decoration-3 style="width:100px;height:20px;" />
      <div class="title-text">实时天气预报</div>
      <dv-decoration-3 style="width:100px;height:20px;" />
    </div>
    <div class="weather-content">
      <div class="location">云南大学呈贡校区软件学院蔬菜基地</div>
      <div class="publish-time">昆明 11：28发布</div>
      <div class="weather-info">
        <div class="weather-display">
          <div ref="weatherChartRef" style="width:200px;height:200px;"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

let weatherChart = null
const weatherChartRef = ref(null)

const handleResize = () => {
  weatherChart?.resize()
}

const initWeatherChart = () => {
  if (weatherChartRef.value) {
    weatherChart?.dispose()
    weatherChart = echarts.init(weatherChartRef.value)
    const option = {
      backgroundColor: 'transparent',
      series: [
        {
          type: 'gauge',
          radius: '100%',
          startAngle: 180,
          endAngle: 0,
          min: -20,
          max: 40,
          splitNumber: 12,
          axisLine: {
            lineStyle: {
              width: 20,
              color: [
                [0.25, '#03d3ec'],
                [0.75, '#91c7ae'],
                [1, '#ff6e76']
              ]
            }
          },
          pointer: {
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '75%',
            width: 8,
            offsetCenter: [0, 0],
            itemStyle: {
              color: '#03d3ec'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: '#03d3ec',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: '#03d3ec',
              width: 3
            }
          },
          axisLabel: {
            color: '#03d3ec',
            fontSize: 14,
            distance: -60,
            formatter: function(value) {
              return value + '°C'
            }
          },
          title: {
            offsetCenter: [0, '30%'],
            fontSize: 14,
            color: '#fff'
          },
          detail: {
            fontSize: 36,
            offsetCenter: [0, '70%'],
            valueAnimation: true,
            color: '#fff',
            formatter: function(value) {
              return value + '°C'
            }
          },
          data: [{
            value: 18,
            name: '多云 7°C~17°C'
          }]
        }
      ]
    }
    weatherChart.setOption(option)
  }
}

onMounted(() => {
  initWeatherChart()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  weatherChart?.dispose()
  weatherChart = null
})
</script>

<style lang="scss" scoped>
.weather-forecast {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;

    .title-text {
      font-size: 14px;
      color: #03d3ec;
      white-space: nowrap;
      margin: 0 10px;
    }
  }

  .weather-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;

    .location {
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 10px;
    }

    .publish-time {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 20px;
    }

    .weather-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;

      .weather-display {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    
  }
}
</style> 